<template>
  <div id="app">
    <div class="header">
      <ul class="nav">
        <div class="header-left">
          <router-link tag="li" to="/Home">
            <img src="./assets/reade.svg" alt="">
            <div class="logo">轻阅</div>
          </router-link>
        </div>
        <div class="header-middle">
          <router-link tag="li" to="/Booklist"></router-link>
          <router-link tag="li" to="/Recommend">碎片阅读</router-link>
<!--          <router-link tag="li" to="/list">私人推荐</router-link>-->
          <router-link tag="li" to="/Communication">交流论坛</router-link>
          <router-link tag="li" to="/Personalcenter">个人中心</router-link>
        </div>
        <div class="header-right" v-show="!userNamee">
          <router-link tag="li" to="/Adminster">登录/注册</router-link>
        </div>
        <div class="header-right" v-show="userNamee">
          <li>欢迎{{userNamee}}！</li>
        </div>
      </ul>
    </div>
    <router-view></router-view>

    <div class="footer">
      <div class="footer-q">
        <div class="footer-qone">
          <p>
            <a href="">网页简介</a>
            <span>|</span>
            <a href="">公司背景</a>
            <span>|</span>
            <a href="">网站导航</a>
            <span>|</span>
            <a href="">客服电话</a>
            <span>|</span>
            <a href="">帮助中心</a>
            <span>|</span>
            <a href="">作者求助</a>
          </p>
        </div>
        <div class="footer-qtwo">
          <p>个人版权所有©2020-<span id="j-year">2020</span> &nbsp;&nbsp;网络出版服务许可证（总）网出证（粤）字第xxx号  &nbsp;&nbsp;信息网络传播视听节目许可证号00000000  &nbsp;&nbsp;增值电信业务经营许可证 00-00000000</p>
        </div>
        <div class="footer-qthree"></div>
        <div class="footer-qfour"> 违法和不良信息举报电话：010-82558163</div>
      </div>
    </div>
  </div>
</template>
<script>

//import DaoHang from '@/components/DaoHang'

import {getLocalStorage} from "./utils/localStorage";

export default {
  name: 'Personalcenter',
  components: {


  },
  data(){
    return{
      userNamee:''
    }
  },
  mounted() {

    this.userNamee = getLocalStorage('useree')
  }

}
  // document.addEventListener('DOMContentLoaded', () => {
  //   let fontSize = window.innerWidth / 10
  //   fontSize = fontSize > 50 ? 50 : fontSize
  //   const html = document.querySelector('html')
  //   html.style.fontSize = fontSize + 'px'
  // })

</script>
<style scoped>
@import './assets/styles/global.scss';
*{
  box-sizing: border-box;
}
body,
html {
  height: 100%;
  width: 100%;
}
#app{
  min-width: 950px;
}
.header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background-color: whitesmoke;
  line-height: 70px;
  height: 72px;
  padding-bottom: 2px;
  color: #fff;
}

.nav{
  width: 1200px;
  margin: 0 auto;
}
.nav div{
  display: flex;
  float: left;
}
.nav .header-right {
  display: flex;
  float: right;
  border: 1px solid #3086f2;
  padding: 0 14px;
  margin: 17px 0px 15px 0px;
  line-height:40px;
  font-size: 14px;
  width: 120px;
  padding: 0 14px;
  box-sizing: border-box
}
.header-left{
  margin: 0px 73px  0px 17px;
}
.header-left li{
  display: flex;
  float: left;
}
.header-left img{
  width: 50px;

}
.logo{
  color: black;
  font-size: 25px;
  padding: 0 0 0 20px;
}
.header-right li{
  display: inline-block;
  text-align: center;
  width: 92px;
  height: 40px;
  color: #248aff;
}
.header-middle li {
  margin: 0 20px;
  cursor: pointer;
  color: black
}
.header-middle li.router-link-active{
  color: #3086f2;
  border-bottom: 2px #3086f2 solid;
}
.view {
  padding: 50px 200px;
}

.router-link-exact-active {
  color: #3086f2;
  font-weight: bold;
}
.footer{
  z-index: 300;
  position: absolute;
  left:0;
  bottom: 0;
  background-color: #fafafa;
  border-top: 1px solid #eee;
  /* margin-top: 40px; */
  width: 100%;
}
.footer-q{
  width: 980px;
  margin: 0 auto;
  padding: 40px 0 50px;
}
.footer-qone{
  white-space: nowrap;
  text-align: center;
}
.footer-qone p{
  font-size: 12px;
  white-space: nowrap;
  text-align: center;
}
.footer-qone span{
  margin: 0 6px;
  color: #ccc;
}
.footer-qtwo{
  clear: both;
  padding: 18px 0 0;
  font-size: 12px;
}
.footer-qtwo p{
  text-align: center;
  color: #888;
}
.footer-qthree{
  width: 980px;
  height: 0px;
  border-bottom: 1.5px solid rgb(27, 23, 23);
  opacity: 0.1;
  padding-top: 32px;
}
.footer-qfour{
  text-align: center;
  font-size: 14px;
  height: 20px;
  padding-top: 32px;
  opacity: 0.6;
  margin: 0 auto;
}
</style>
